import { Component, Vue, Prop, Emit } from "vue-property-decorator";

const name = "ActionDrawer";

@Component({
  name,
})
class ActionDrawer extends Vue {
  @Prop()
  placement!: "top" | "right" | "bottom" | "left";
  @Prop()
  visible!: boolean;
  @Prop()
  destroyOnClose!: boolean;
  @Prop()
  closable!: boolean;
  @Prop()
  maskClosable!: boolean;
  @Prop()
  mask!: boolean;
  @Prop()
  keyboard!: boolean;
  @Prop()
  wrapStyle!: AnyObject;
  @Prop()
  drawerStyle!: AnyObject;
  @Prop()
  headerStyle!: AnyObject;
  @Prop()
  bodyStyle!: AnyObject;
  @Prop()
  slotHeaderStyle!: AnyObject;
  @Prop()
  title!: string;
  static install: (Vue: any) => void;

  @Emit("close")
  close(e: Event) {
    return e;
  }

  @Emit("actionClick")
  actionClick(action?: AnyObject) {
    return {
      action,
    };
  }

  render() {
    const {
      placement,
      visible,
      title,
      closable,
      maskClosable,
      mask,
      keyboard,
      wrapStyle,
      drawerStyle,
      headerStyle,
      bodyStyle,
      slotHeaderStyle,
      destroyOnClose,
    } = this.$props;
    const { title: slotsTitle, content: slotsContent } = this.$slots;
    const { close, actionClick } = this;

    const defaultPlacement = placement || "bottom";
    const defaultDestroyOnClose = destroyOnClose || true;
    const defaultClosable = closable || false;
    const defaultMaskClosable = maskClosable || true;
    const defaultMask = mask || false;
    const defaultKeyboard = keyboard || false;
    const defaultTitle = title || slotsTitle || "底部抽屉";
    const defaultWrapStyle = wrapStyle || {
      width: "90%",
      margin: "0 auto",
      left: "50%",
      transform: "translate(-50%, 0)",
    };
    const defaultDrawerStyle = drawerStyle || {};
    const defaultHeaderStyle = headerStyle || {
      borderBottom: "unset",
    };
    const defaultSlotHeaderStyle = slotHeaderStyle || {
      color: "rgba(25, 31, 37, 0.28)",
      fontSize: "12px",
      textAlign: "center",
    };
    const defaultBodyStyle = bodyStyle || {
      padding: 0,
    };

    const defaultActionSlots = slotsContent || [
      {
        label: "打开文件",
        key: "open",
      },
      {
        label: "下载文件",
        key: "down",
      },
    ];

    const actionStyle = {
      color: "#3296FA",
      fontSize: "17px",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      height: "52px",
      borderTop: "1px solid rgba(25, 31, 37, 0.08)",
    };

    return (
      <a-drawer
        height={"auto"}
        visible={visible}
        destroyOnClose={defaultDestroyOnClose}
        placement={defaultPlacement}
        onclose={(e: Event) => close(e)}
        closable={defaultClosable}
        maskClosable={defaultMaskClosable}
        mask={defaultMask}
        keyboard={defaultKeyboard}
        wrapStyle={defaultWrapStyle}
        drawerStyle={defaultDrawerStyle}
        bodyStyle={defaultBodyStyle}
        headerStyle={defaultHeaderStyle}
      >
        {
          <div slot="title" style={{ ...defaultSlotHeaderStyle }}>
            {defaultTitle}
          </div>
        }
        {slotsContent ? (
          slotsContent
        ) : (
          <div>
            {(defaultActionSlots as AnyArray).map((k) => {
              return (
                <div
                  style={{ ...actionStyle }}
                  key={k.key}
                  onclick={() => actionClick(k)}
                >
                  {k.label}
                </div>
              );
            })}
            <div
              style={{
                height: "10px",
                background: "rgba(0, 0, 0, 0.267)",
              }}
            />
            <div
              style={{
                ...actionStyle,
                color: "rgba(25, 31, 37, 0.56)",
              }}
              onclick={(e: Event) => close(e)}
            >
              取消
            </div>
          </div>
        )}
      </a-drawer>
    );
  }
}

ActionDrawer.install = function(Vue) {
  Vue.component(name, ActionDrawer);
};

export default ActionDrawer;
